<template>
  <div id="map-container">
    <div id="mouse-position"></div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted } from 'vue';
import 'ol/ol.css'
import { Map, View } from 'ol'
import { ZoomSlider, FullScreen, MousePosition, OverviewMap, ScaleLine, Rotate, ZoomToExtent } from "ol/control"
import { createStringXY } from 'ol/coordinate'
import { useTianTileLayer, projection } from '@/hooks'
import { TiandiTileLayerConfigEnum } from '@/enum'

let map: Map

onMounted(() => {
  initMap()
})

// 初始化地图
function initMap() {
  map = new Map({
    target: 'map-container',
    layers: [ ...useTianTileLayer(TiandiTileLayerConfigEnum.DX) ],
    view: new View({
      center: [116.413467,39.914935],
      projection: projection,
      zoom: 4,
      maxZoom: 17,
      minZoom: 1
    })
  })
  addControls()
}

// 添加控件
function addControls() {
  map.addControl(new MousePosition({
    coordinateFormat: createStringXY(4),
    className: 'custom-mouse-position',
    target: document.getElementById('mouse-position')!
  }))
  map.addControl(new ZoomSlider())
  map.addControl(new FullScreen())
  map.addControl(new OverviewMap({ collapsed: false }))
  map.addControl(new ScaleLine())
  map.addControl(new Rotate())
  map.addControl(new ZoomToExtent({ extent: [12667718, 2562800, 12718359, 2597725] }))
}
</script>
<style scoped>

#map-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 鼠标位置控件层样式设置 */
#mouse-position {
  position: absolute;
  right: 10px;
  bottom: 5px;
  /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
  z-index: 2000;
}
/* 鼠标位置信息自定义样式设置 */
.custom-mouse-position {
  color: rgb(0,0,0);
  font-size: 16px;
  font-family: "微软雅黑";
}
</style>